﻿<!DOCTYPE html>
<html ng-app="App">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link href="site.css" rel="stylesheet" />
</head>
<body>
    <div ng-controller="HomeController">
        <div class="form-inline">
            <input class="form-control" ng-model="name" placeholder="Name...." />
            <input class="form-control" ng-model="email" placeholder="Email.." />
            <input class="form-control" ng-model="phoneNumber" placeholder="Enter phone number..." />
            <button class="btn btn-primary" ng-click="addContact()">Add</button>
        </div>
        <br />
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>E-mail</th>
                    <th>Phone Number</th>
                    <th>Buttons</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="C in contacts">
                    <td>{{C.name}}</td>
                    <td>{{C.email}}</td>
                    <td>{{C.phoneNumber}}</td>
                    <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </div><!-- end of HomeController -->

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="script.js"></script>
</body>
</html>